<link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="../components/core-toolbar/core-toolbar.html">
<link rel="import" href="../components/core-header-panel/core-header-panel.html">
<link rel="import" href="../components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="../components/core-scaffold/core-scaffold.html">
<link rel="import" href="../components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="../components/core-pages/core-pages.html">
<link rel="import" href="nav-tree.html">
<link rel="import" href="nav-drawer-panel.html">


<polymer-element name="nav-panel" attributes="mode">

<template>
    <style>
    :host {
      display: block;
    }
    #navheader{
      background-color: #1685a9;
    }
    [drawer] {
      background-color: #f0f0f4;
      border-right: 1px solid #ccc;
    }
    [main] {
     height: 100%;
     background-color: #fffbf0;
    }
    </style>

    <nav-drawer-panel id="drawerPanel">
      <!--
      <div vertical layout drawer>
        <content select="[navigation]"></content>
      </div>
      -->
      <core-header-panel drawer flex mode="seamed">
        <core-toolbar id="navheader">
          <span>{{menu_title}}</span>
        </core-toolbar>
        <nav-tree></nav-tree>
      </core-header-panel>
      <core-header-panel main mode="{{mode}}">
        <core-toolbar id="navheader">
          <core-icon-button id="menuButton" icon="menu" on-tap="{{togglePanel}}"></core-icon-button>
        <content select="[tool]"></content>
        </core-toolbar>                              
        <content select="*"></content>
      </core-header-panel>
    </nav-drawer-panel>
</template>

<script>

Polymer('nav-panel', {
  menu_title:"Menu",
  mode:"seamed",
  togglePanel: function() {
    this.$.drawerPanel.togglePanel();
  }
});

</script>

</polymer-element>
